<template>
  <div>
    <van-nav-bar
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    <div class="login">

      <h2 class="title">短信验证</h2>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          class="username"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不对' }]"
        />
        <van-row class="verifybox">
          <van-col span="16">
            <van-field
              v-model="password"
              type="password"
              name="密码"
              placeholder="请输入验证码"
              :rules="[{ required: true, message: '' },
              { pattern: /^\d{6}$/, message: '验证码是6个数字' }]"
            />
          </van-col>
          <van-col span="8">
            <!-- <van-button type="default" class="verify">发送验证码</van-button> -->
            <span  v-if="isBtn" @click="fasong">发送验证码</span>
            <span v-else class="reget">{{count}}s后重新获取</span>
            <!-- <span>发送验证码</span> -->
          </van-col>
        </van-row>
        <div style="margin: 16px">
          <van-button
            square
            block
            type="info"
            native-type="submit"
            to="/home-4"
            @click="login"
            >登录</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import { verify, userLogin } from '@/api/user'
import { setToken } from '@/utils/storage'
export default {
  name: 'LoginPage',
  data () {
    return {
      username: '',
      password: '',
      isBtn: true,
      count: 0,
      timer: null

    }
  },
  methods: {
    async onSubmit (values) {
      console.log('submit', values)
      // const res = await verify(values)
      // // localStorage.setItem('hmmj-vant-h5-90-token', res.data.data.token)
      // this.$toast.success('登录成功')
      // this.$router.push('/')
    },
    onClickLeft () {
      this.$toast('返回')
      this.$router.push('/')
    },
    async fasong () {
      if (this.username === '') return this.$toast.fail('请输入手机号')
      this.isBtn = false
      this.count = 60
      this.timer = setInterval(() => {
        this.count--
        if (this.count === 0) {
          clearInterval(this.timer)
          this.isBtn = true
        }
      }, 1000)

      console.log(this.username)
      const res = await verify(this.username)
      // console.log(res.response.data.message)
      console.log(res)
    },
    async login () {
      const res = await userLogin({ mobile: this.username, code: this.password })
      console.log(res.data.token)
      setToken(res.data.token)
      this.$router.push('/home-4')
    }

  }
}
</script>

<style scoped lang='less'>
.title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
  padding-left: 18px;
}
.checkbox {
  font-size: 10px;
  padding-left: 12px;
  margin-bottom: 20px;
}
.username {
  margin-bottom: 20px;
}
.verifybox {
  margin-bottom: 20px;
}
.verify {
  font-size: 11px;
}
.login {
  margin: 50px 40px;
}
</style>
